import React, { Component } from 'react';
import { Modal, Button,Form, Icon, Input,Checkbox } from 'antd';
const FormItem = Form.Item;

class ResetPassword extends React.Component {
    state = {
        visible: false,
        confirmLoading: false,
    };
    handleOk = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.setState({
                    ModalText: 'The modal will be closed after two seconds',
                    confirmLoading: true,
                });
                setTimeout(() => {
                    this.setState({
                        confirmLoading: false,
                        visible:false
                    });
                }, 2000);

            }
        });
    };
    showModelHandler = ()=> {
        this.setState({
            visible:true
        })
    };
    handleCancel = () => {
        this.setState({
            visible:false
        })
    };
    render() {
        const { visible, confirmLoading } = this.state;

        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 18 },
        };

        return (
            <span>
                <span onClick={this.showModelHandler}>
                  { this.props.children }
                </span>
                <Modal title="密码修改"
                       visible={visible}
                       onOk={this.handleOk}
                       confirmLoading={confirmLoading}
                       onCancel={this.handleCancel}
                >
                    <Form layout="horizontal" className="">
                        <FormItem
                            label="旧密码"
                            {...formItemLayout}
                        >
                            {getFieldDecorator('oldPassword', {
                                rules: [{ required: true, message: '请输入您的密码!' }],
                            })(
                                <Input type="password" placeholder="Password" />
                            )}
                        </FormItem>
                        <FormItem
                            label="新密码"
                            help="密码由8-16个字符组成"
                            {...formItemLayout}
                        >
                            {getFieldDecorator('newPassword', {
                                rules: [{ required: true, message: '请输入您的新密码!' }],
                            })(
                                <Input type="password" placeholder="Password" />
                            )}
                        </FormItem>
                    </Form>

                </Modal>
            </span>
        );
    }
}
const WrappedNormalLoginForm = Form.create()(ResetPassword);
export default WrappedNormalLoginForm;